<!--
 * @Author: jiutian
 * @Date: 2023-02-06 16:44:06
 * @LastEditTime: 2023-02-11 15:10:41
 * @LastEditors:  
-->
<script setup lang="ts">
import { onBeforeMount, reactive, ref } from "vue";
import request from "@api";
import { useRoute } from "vue-router";
import { Editor } from "@wangeditor/editor-for-vue";
import defaultPic from "@imgs/user_default.webp";
import { useStore } from "@/store";
import _throttle from "loadsh/throttle";
import { ElMessage, ElNotification } from "element-plus";
const $route = useRoute();
const editorConfig = {
  readOnly: true,
};
const store = useStore();

let detail = reactive({
  key: {},
});

let collect = ref(false);
let like = ref(false);
let commitText = ref("");
let showPublish = ref(false);
let listQuery = reactive({
  pageSize: 10,
  pageNum: 1,
});
let commitList = ref([]);
let total = ref(0);

function getBlogDetail() {
  request["check/getBlogById"]({ params: { id: $route.params.id } }).then(
    (res: any) => {
      if (res.code == 200) {
        detail.key = res.data;
      }
    }
  );
}
function checkOperate() {
  request["check/checkOperate"]({ params: { id: $route.params.id } }).then(
    (res: any) => {
      if (res.code == 200) {
        like.value = res.data.like;
        collect.value = res.data.collect;
      }
    }
  );
}

function getCommitList() {
  request["check/getCommitList"]({
    params: { id: $route.params.id, ...listQuery },
  }).then((res: any) => {
    if (res.code == 200) {
      commitList.value = res.data.list;
      total.value = res.data.total;
      listQuery.pageNum = res.data.pageNum;
      listQuery.pageSize = res.data.pageSize;
    }
  });
}

// 节流 一定时间内只执行一次
const operateLike = _throttle(function () {
  request["check/operateLike"]({
    data: { id: $route.params.id, type: like.value ? "0" : "1" },
  }).then((res: any) => {
    if (res.code == 200) {
      checkOperate();
    } else {
      ElNotification({
        title: "Error",
        message: res.msg,
        type: "error",
      });
    }
  });
}, 500);

const operateCollect = _throttle(function () {
  request["check/operateCollect"]({
    data: { id: $route.params.id, type: collect.value ? "0" : "1" },
  }).then((res: any) => {
    if (res.code == 200) {
      checkOperate();
    } else {
      ElNotification({
        title: "Error",
        message: res.msg,
        type: "error",
      });
    }
  });
}, 500);

const publish = _throttle(function () {
  if (!commitText.value)
    return ElMessage({
      message: "请输入评论内容",
      type: "warning",
    });
  request["check/publishCommit"]({
    data: { id: $route.params.id, context: commitText.value },
  }).then((res: any) => {
    if (res.code == 200) {
      commitText.value = "";
      ElNotification({
        title: "success",
        message: res.msg,
        type: "success",
      });
      getCommitList();
    } else {
      ElNotification({
        title: "Error",
        message: res.msg,
        type: "error",
      });
    }
  });
}, 500);

function handleSizeChange(val: number) {
  listQuery.pageSize = val;
  getCommitList();
}

function handleCurrentChange(val: number) {
  listQuery.pageNum = val;
  getCommitList();
}

getBlogDetail();
checkOperate();
getCommitList();
</script>

<template>
  <div class="detail">
    <div class="title">{{ detail.key.blogTitle }}</div>
    <div class="tools">
      <div class="publish">
        来源：{{ detail.key.username || detail.key.phoneNumber }}
      </div>
      <div class="create_time">时间：{{ detail.key.createTime }}</div>
      <div class="views">浏览：{{ detail.key.views }}次</div>
    </div>

    <div class="context">
      <Editor
        style="height: auto; overflow-y: hidden"
        class="Editor"
        v-model="detail.key.blogContext"
        :defaultConfig="editorConfig"
      />
    </div>

    <div class="bottom_box">
      <span
        ><i
          class="iconfont icon-dianzan_kuai"
          :class="{ shake: like }"
          @click="operateLike"
          :style="{ color: like ? '#7d84fe' : '#000' }"
        ></i
      ></span>
      <span
        ><i
          class="iconfont icon-pinglun"
          @click="showPublish = !showPublish"
        ></i
      ></span>
      <span>
        <i
          class="iconfont icon-shoucang"
          :style="{ color: collect ? '#7d84fe' : '#000' }"
          :class="{ shake: collect }"
          @click="operateCollect"
        ></i
      ></span>
    </div>

    <div class="publish_com" :class="{ showPublish: showPublish }">
      <div class="left">
        <img :src="store.currentUser.userPic || defaultPic" alt="" />
        <span>{{
          store.currentUser.username || store.currentUser.phoneNumber
        }}</span>
      </div>
      <div class="right">
        <el-input
          placeholder="评论内容"
          v-model="commitText"
          type="textarea"
          maxlength="500"
          resize="none"
          show-word-limit
        ></el-input>
        <div class="btns">
          <el-button type="primary" @click="publish">发表</el-button>
        </div>
      </div>
    </div>

    <div class="commit_box">
      <div class="title_c">———— 评论列表 ————</div>
      <div class="commit_context">
        <template v-if="commitList.length">
          <div class="content_box">
            <div class="item" v-for="item in commitList" :key="item.id">
              <div class="top_info">
                <div class="user">
                  <img :src="item.userPic || defaultPic" alt="" />
                  <span>{{ item.username || item.phoneNumber }}</span>
                </div>
                <div class="create_time">
                  <div>{{ item.createTime }}</div>
                  <span
                    class="author"
                    v-if="item.userId == store.currentUser.id"
                    >作者</span
                  >
                </div>
              </div>

              <div class="commit_context">{{ item.context }}</div>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              background="'#7d84fe"
              layout="prev, pager, next , sizes"
              :total="total"
              :page-sizes="[10, 20, 30, 40]"
              v-model:current-page="listQuery.pageNum"
              v-model:page-size="listQuery.pageSize"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </template>
        <template v-else>
          <div class="emptyData"></div>
        </template>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
@keyframes shakeName {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-30deg);
  }
  75% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.detail {
  padding: 20px;
  .title {
    margin-bottom: 30px;
    font-weight: bolder;
    font-size: 24px;
    text-align: center;
  }
  .tools {
    display: flex;
    justify-content: space-around;
    color: #999;
    font-size: 14px;
  }
  .context {
    width: 80%;
    margin: 0 auto;
  }
  .bottom_box {
    padding: 20px 0;
    border-top: 1px solid #ededed;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      display: inline-block;
      cursor: pointer;
      font-size: 30px;
      transition: all 0.5s;
    }
    span {
      margin: 0px 20px;
    }
    .iconfont {
      margin-right: 0px !important;
    }
    .shake {
      animation: shakeName 0.5s;
    }
  }

  .publish_com {
    display: flex;
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    height: 0px;
    overflow: hidden;
    transition: all 0.3;
    .left {
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 45px;
        height: 45px;
      }
      span {
        margin-top: 15px;
      }
    }
    .right {
      padding-left: 20px;
      flex: 1;
      .btns {
        margin-top: 10px;
        text-align: right;
      }
    }
  }
  .showPublish {
    height: 120px;
  }

  .commit_box {
    .title_c {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      line-height: 50px;
    }
    .commit_context {
      padding: 15px;
      background-color: #f7f7f7;
      .content_box {
        margin-bottom: 20px;
        .item {
          padding-bottom: 10px;
          border-bottom: 1px solid #ededed;
          .top_info {
            display: flex;
            .user {
              width: 150px;
              display: flex;
              flex-direction: column;
              align-items: center;
              img {
                width: 40px;
                height: 40px;
              }
              span {
                margin-top: 5px;
                display: inline-block;
                text-align: center;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .create_time {
              div {
                color: #999;
              }

              .author {
                padding: 1px 3px;
                border-radius: 3px;
                color: #fff;
                font-size: 14px;
                background-color: #7d84fe;
              }
            }
          }
        }
      }
      .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>